<script setup lang="ts">
  import { toRaw } from 'vue';
  import { useForm } from '@/hooks/arco/useForm';
  import {
    editBranchRoom,
    createBranchRoom,
    deleteBranchRoom,
  } from '@/api/organization/room';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { queryInstInfrastructure } from '@/api/organization/nursing-home';
  import useDetailDrawerBinder from '@/hooks/arco/useDetailDrawerBinder';

  const form = useForm({
    state: {
      roomId: '',
      branchId: '',
      branchName: '',
      buildingId: '',
      buildingName: '',
      roomNo: '',
      roomTitle: '',
      floorNumber: '',
      status: '',
      roomType: '',
      bedNum: undefined as undefined | number,
    },
    rules: {
      branchId: [
        {
          required: true,
          message: '请选择房间所在院区',
        },
      ],
      buildingId: [
        {
          required: true,
          message: '请选择房间所在建筑',
        },
      ],
      roomNo: [
        {
          required: true,
          message: '请输入房间号',
        },
      ],
      floorNumber: [
        {
          required: true,
          message: '请选择所在楼层',
        },
      ],
      roomType: [
        {
          required: true,
          message: '请选择房间类型',
        },
      ],
      status: [
        {
          required: true,
          message: '请选择房间状态',
        },
      ],
    },
  });

  const branchSelect = useSelectOption({
    leader: true,
    immediate: false,
    name: '所在院区',
    apiFun: queryInstInfrastructure,
    transformDataFun(data) {
      return data.branches;
    },
    fieldNames: {
      label: 'branchName',
      value: 'branchId',
      extra: 'buildings',
    },
    getValue() {
      return form.state.branchId;
    },
    enhanceExtraData: true,
  });

  const buildingSelect = useSelectOption({
    immediate: false,
    name: '所在建筑',
    getValue() {
      return form.state.buildingId;
    },
    apiFun: (id, extra) => {
      return Promise.resolve(extra || []);
    },
    enhanceExtraData: true,
    fieldNames: {
      label: 'buildingName',
      value: 'buildingId',
      extra: 'floors',
    },
    onChange(e) {
      // floorOptions.value = extra;
      // floorSelect.retry();
      form.state.buildingId = e;
    },
    upstream: branchSelect,
  });

  const floorSelect = useSelectOption({
    upstream: buildingSelect,
    immediate: false,
    name: '所在楼层',
    apiFun: (e, extra) => {
      return Promise.resolve(extra || []);
    },
    enhanceExtraData: true,
    fieldNames: {
      label: 'floorName',
      value: 'floorId',
      extra: 'rooms',
    },
    onChange(e) {
      form.state.floorNumber = e;
    },
    getValue() {
      return form.state.floorNumber;
    },
  });

  const editDrawer = useDetailDrawerBinder({
    modalName: '房间',
    deleteText: '提示：房间内的长者将与房间取消关联。',
    modes: ['detail', 'add', 'edit'],
    deleteApi: () => deleteBranchRoom(form.state.roomId),
    onShow(mode, otherParams) {
      if (mode === 'add') {
        form.backToInit();
      } else {
        form.setFieldsValue(otherParams);
        form.state.roomType = otherParams.bedNum;
      }
      branchSelect.retry();
    },
    async onOkClick(mode) {
      await form.validate();

      const data = toRaw(form.state);
      data.bedNum = Number(data.roomType);

      if (mode === 'add') {
        return createBranchRoom(data);
      }

      if (mode === 'edit') {
        return editBranchRoom(data);
      }

      return Promise.resolve();
    },
  });

  defineExpose(editDrawer.expose);
</script>

<template>
  <detail-drawer v-bind="editDrawer.bindProps">
    <a-form
      v-bind="form.bindProps"
      :disabled="editDrawer.modeIs('detail')"
      layout="vertical"
    >
      <a-row>
        <a-col v-if="editDrawer.isShow('detail')" :span="24">
          <a-form-item field="roomId" label="房间ID">
            <a-input v-model="form.state.roomId" readonly />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="branchId" label="所在院区">
            <a-select
              v-model="form.state.branchId"
              v-bind="branchSelect.bindProps"
              :style="{ width: '100%' }"
              placeholder="请选择房间所在院区"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="buildingId" label="所在建筑">
            <a-select
              v-model="form.state.buildingId"
              v-bind="buildingSelect.bindProps"
              :style="{ width: '100%' }"
              placeholder="请选择房间所在建筑"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="floorNumber" label="所在楼层">
            <a-select
              v-model="form.state.floorNumber"
              v-bind="floorSelect.bindProps"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="roomNo" label="房间号">
            <a-input v-model="form.state.roomNo" placeholder="请输入房间号" />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="status" label="房间状态">
            <dict-select
              v-model="form.state.status"
              type="InstitutionBranchRoomStatus"
              placeholder="请选择房间状态"
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item field="roomType" label="房间类型">
            <dict-select
              v-model="form.state.roomType"
              type="InstitutionRoomType"
              placeholder="请选择房间类型"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </detail-drawer>
</template>

<style lang="less"></style>
